<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入数字并传入后端</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f4f4f9;
        }

        .date-wrapper {
            text-align: center;
            background-color: #007bff;
            color: #ffffff;
            padding: 10px;
            border-radius: 10px;
            margin: 20px 0;
            font-size: 18px;
            width: 100%;
            max-width: 800px;
        }

        .container-wrapper {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }

        .container {
            text-align: center;
            background: #ffffff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 200px;
        }

        input[type="number"] {
            width: 80%;
            padding: 10px;
            font-size: 16px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            -moz-appearance: textfield; /* 隐藏箭头 (Firefox) */
        }

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none; /* 隐藏箭头 (Chrome, Safari, Edge) */
            margin: 0;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<!-- 今日时间 -->
<div class="date-wrapper" id="dateDisplay">
    <!-- 日期内容会通过 JavaScript 动态填充 -->
</div>

<div class="container-wrapper">
    <!-- 第一个表单 -->
    <div class="container">
        <h2>南南铝分布式光伏电站</h2>
        <form onsubmit="submitForm(event, 'nnl')">
            <input type="number" name="number" placeholder="输入电量" required>
            <button type="submit">提交</button>
        </form>
    </div>
    <!-- 第二个表单 -->
    <div class="container">
        <h2>广投能源管理中心光伏站</h2>
        <form onsubmit="submitForm(event, 'gtzhny')">
            <input type="number" name="number" placeholder="输入电量" required>
            <button type="submit">提交</button>
        </form>
    </div>
    <!-- 第三个表单 -->
    <div class="container">
        <h2>中国—东盟数字经济产业园光伏站</h2>
        <form onsubmit="submitForm(event, 'dongmeng')">
            <input type="number" name="number" placeholder="输入电量" required>
            <button type="submit">提交</button>
        </form>
    </div>
    <!-- 第四个表单 -->
    <div class="container">
        <h2>南宁中恒光伏电站</h2>
        <form onsubmit="submitForm(event, 'zhongheng')">
            <input type="number" name="number" placeholder="输入电量" required>
            <button type="submit">提交</button>
        </form>
    </div>
</div>

<script>
    // 设置今日时间
    function setTodayDate() {
        const dateDisplay = document.getElementById("dateDisplay");
        const today = new Date();
        const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
        const formattedDate = today.toLocaleDateString('zh-CN', options);
        dateDisplay.textContent = `今日时间：${formattedDate}`;
    }

    // 初始化日期
    setTodayDate();

    /**
     * 提交表单方法，根据不同表单传递数据到后端
     * @param {Event} event 表单事件对象
     * @param {string} stationName 电站名称
     */
    function submitForm(event, stationName) {
        event.preventDefault(); // 阻止默认表单提交行为

        // 获取表单数据
        const form = event.target;
        const numberInput = form.querySelector('input[name="number"]');
        const energyValue = numberInput.value;
        console.log(energyValue)

        if (!energyValue) {
            alert("请输入电量！");
            return;
        }

        // 准备请求参数
        const payload = {
            stationName: stationName,
            energyValue: parseFloat(energyValue)
        };
        console.log(payload)

        // 使用 Fetch API 发送 POST 请求
        fetch('http://localhost:8088/chargeStation/getTodaySolarEnergy', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(payload),
        })
            .then(response => response.json())
            .then(data => {
                // 根据后端响应处理结果
                if (data.success) {
                    alert(`成功提交！${stationName} 的电量为：${energyValue}`);
                } else {
                    alert(`提交失败：${data.message || "未知错误"}`);
                }
            })
            .catch(error => {
                console.error('请求错误:', error);
                alert('提交失败，请稍后重试。');
            });
    }
</script>
</body>
</html>
